<template>
    <slot />
</template>
<script setup>
// 接收父节传入点参数
const props = defineProps({
    element: { // 元素信息
        type: Object,
        default: () => ({}),
    },
    value: {
        type: String,
        default: ''
    },
    index: { // 新增：声明index属性
        type: Number,
        default: 0 // 默认值根据业务需求调整
    }
})

watch(() => 
    props.element, 
    (newVal, oldVal) => {
        try {
                // 元素对象
            let em = null
            if(props.element.type == "inputNumber"){
                em = document.getElementById(props.element.options.id).parentElement.parentElement.parentElement
            }else if(props.element.group == "main"){
                em = document.getElementById(props.element.options.id).parentElement.parentElement
            }else {
                em = document.getElementById(props.element.options.id)
            }
            
            // 设置颜色
            em.style.color = newVal.options.colour

            // 设置背景颜色
            em.style.backgroundColor = newVal.options.backgroundColour
            
            // 设置缩放
            em.style.scale = newVal.options.scale ? newVal.options.scale *  0.01 : ""
            
            // 设置透明度
            if(newVal.options.transparency != 100){
                em.style.opacity = newVal.options.transparency *  0.01
            }


            /********************************* 尺寸设置 ************************************/

            // 设置尺寸-宽度
            em.style.width = newVal.options.sizes.width.value ? newVal.options.sizes.width.value + newVal.options.sizes.width.unit : "" 

            // 设置尺寸-高度
            em.style.height = newVal.options.sizes.height.value ? newVal.options.sizes.height.value + newVal.options.sizes.height.unit : ""

            // 设置尺寸-最小宽度
            em.style.minWidth = newVal.options.sizes.minWidth.value ? newVal.options.sizes.minWidth.value + newVal.options.sizes.minWidth.unit : ""

            // 设置尺寸-最小高度
            em.style.minHeight = newVal.options.sizes.minHeight.value ? newVal.options.sizes.minHeight.value + newVal.options.sizes.minHeight.unit : ""

            // 设置尺寸-最大宽度
            em.style.maxWidth = newVal.options.sizes.maxWidth.value ? newVal.options.sizes.maxWidth.value + newVal.options.sizes.maxWidth.unit : ""

            // 设置尺寸-最大高度
            em.style.maxHeight = newVal.options.sizes.maxHeight.value ? newVal.options.sizes.maxHeight.value + newVal.options.sizes.maxHeight.unit : ""

            // 设置尺寸-溢出
            em.style.overflow = newVal.options.sizes.overflow


            /********************************* 边距设置 ************************************/

            // 设置外边距-顶部
            em.style.marginTop = newVal.options.margin.top

            // 设置外边距-顶部
            em.style.marginRight = newVal.options.margin.right

            // 设置外边距-下边
            em.style.marginBottom = newVal.options.margin.bottom

            // 设置外边距-左边
            em.style.marginLeft = newVal.options.padding.left

            // 设置内边距-顶部
            em.style.paddingTop = newVal.options.padding.top

            // 设置内边距-顶部
            em.style.paddingRight = newVal.options.padding.right

            // 设置内边距-下边
            em.style.paddingBottom = newVal.options.padding.bottom

            // 设置内边距-左边
            em.style.paddingLeft = newVal.options.padding.left


            /********************************* 边框设置 ************************************/

            // 设置边框-上边类型
            em.style.borderTopStyle = newVal.options.frame.top.type
            
            // 设置边框-上边粗细
            em.style.borderTopWidth = newVal.options.frame.top.coarseAndFine.value ? newVal.options.frame.top.coarseAndFine.value + newVal.options.frame.top.coarseAndFine.unit : ""

            // 设置边框-上边颜色
            em.style.borderTopColor = newVal.options.frame.top.colour


            // 设置边框-右边类型
            em.style.borderRightStyle = newVal.options.frame.right.type

            // 设置边框-右边粗细
            em.style.borderRightWidth = newVal.options.frame.right.coarseAndFine.value ? newVal.options.frame.right.coarseAndFine.value + newVal.options.frame.right.coarseAndFine.unit : ""

            // 设置边框-右边颜色
            em.style.borderRightColor = newVal.options.frame.right.colour


            // 设置边框-下边类型
            em.style.borderBottomStyle = newVal.options.frame.bottom.type
            
            // 设置边框-下边粗细
            em.style.borderBottomWidth = newVal.options.frame.bottom.coarseAndFine.value ? newVal.options.frame.bottom.coarseAndFine.value + newVal.options.frame.bottom.coarseAndFine.unit : ""

            // 设置边框-下边颜色
            em.style.borderBottomColor = newVal.options.frame.bottom.colour


            // 设置边框-左边类型
            em.style.borderLeftStyle = newVal.options.frame.left.type
            
            // 设置边框-左边粗细
            em.style.borderLeftWidth = newVal.options.frame.left.coarseAndFine.value ? newVal.options.frame.left.coarseAndFine.value + newVal.options.frame.left.coarseAndFine.unit : ""
            
            // 设置边框-左边颜色
            em.style.borderLeftColor = newVal.options.frame.left.colour


            // 设置边框-全局类型
            em.style.borderStyle = newVal.options.frame.middle.type
            
            // 设置边框-全局粗细
            em.style.borderWidth = newVal.options.frame.middle.coarseAndFine.value ? newVal.options.frame.middle.coarseAndFine.value + newVal.options.frame.middle.coarseAndFine.unit : ""

            // 设置边框-全局颜色
            em.style.borderColor = newVal.options.frame.middle.colour

            /********************************* 圆角设置 ************************************/

            // 设置圆角-左上角
            em.style.borderTopLeftRadius = newVal.options.borderRadius.topLeft.value ? newVal.options.borderRadius.topLeft.value + newVal.options.borderRadius.topLeft.unit : ""

            // 设置圆角-左下角
            em.style.borderBottomLeftRadius = newVal.options.borderRadius.bottomLeft.value ? newVal.options.borderRadius.bottomLeft.value + newVal.options.borderRadius.bottomLeft.unit : ""

            // 设置圆角-右上角
            em.style.borderTopRightRadius = newVal.options.borderRadius.topRight.value ? newVal.options.borderRadius.topRight.value + newVal.options.borderRadius.topRight.unit : ""

            // 设置圆角-右下角
            em.style.borderBottomRightRadius = newVal.options.borderRadius.bottomRight.value ? newVal.options.borderRadius.bottomRight.value + newVal.options.borderRadius.bottomRight.unit : ""

            /********************************* 字体设置 ************************************/

            em.style.fontSize = newVal.options.font.size.value ? newVal.options.font.size.value + newVal.options.font.size.unit : ""
            em.style.lineHeight = newVal.options.font.rowHeight.value ? newVal.options.font.rowHeight.value + newVal.options.font.size.unit : ""
            em.style.letterSpacing = newVal.options.font.spacing.value ? newVal.options.font.spacing.value + newVal.options.font.size.unit : ""
            em.style.fontWeight = newVal.options.font.weight
            em.style.textDecoration = newVal.options.font.modify ? newVal.options.font.modify : ""
            em.style.textAlign = newVal.options.font.textAlign ? newVal.options.font.textAlign : ""

            // 设置自定义属性
            if(newVal.options.customizeStyle.length > 0){
                newVal.options.customizeStyle.forEach(item => {
                    em.style.setProperty(item.keyname, item.value)
                })
            }
            
        } catch (error) {
            // console.log(error) 
        }
    }, 
    { deep: true }
)
</script>